<template>
  <my-template>
    <el-row type="flex" justify="center">
      <el-col :span="23" style="background-color: #ffffff; padding: 20px 0">
        <el-row type="flex" justify="center">
          <el-col :span="21">
            <el-card>
              <div slot="header">
                <span style="font-size: 18px">案例基本信息</span>
              </div>
              <el-descriptions :column="1">
                <el-descriptions-item label="所在省份">
                  <el-input
                    v-model="province"
                    size="mini"
                    style="width: 200px"
                  ></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="案例名称">
                  <el-input
                    v-model="caseName"
                    size="mini"
                    style="width: 200px"
                  ></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="应用部门">
                  <el-select
                    v-model="department"
                    placeholder="应用部门"
                    size="mini"
                    style="width: 200px"
                  >
                    <el-option
                      v-for="item in department2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="案例类型">
                  <el-select
                    v-model="caseType"
                    placeholder="案例类型"
                    size="mini"
                    style="width: 200px"
                  >
                    <el-option
                      v-for="item in caseType2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="首页地址">
                  <el-input
                    v-model="ipAddress"
                    size="mini"
                    style="width: 200px"
                  ></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <span slot="label" style="width: 55px">关键字</span>
                  <el-select
                    multiple
                    v-model="crux"
                    placeholder="关键字"
                    size="mini"
                    style="width: 200px"
                  >
                    <el-option
                      v-for="item in crux2"
                      :key="item.value"
                      :label="item.cruxName"
                      :value="item.id"
                    />
                  </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="简要介绍">
                  <el-input
                    v-model="introduce"
                    type="textarea"
                    size="mini"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    style="width: 50%"
                  >
                  </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="案例图片">
                  <div class="case-img">
                    <el-upload
                      action="#"
                      ref="upload"
                      multiple
                      list-type="picture-card"
                      :auto-upload="false"
                      :file-list="casePicture"
                      name="files"
                      :on-preview="preview"
                      :on-change="handleChange"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="imageUrl" alt="" />
                    </el-dialog>
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
            <br />
            <br />
            <br />
            <el-card>
              <div slot="header">
                <span style="font-size: 18px">联系人基本信息</span>
              </div>
              <el-descriptions :column="1">
                <el-descriptions-item>
                  <span slot="label" style="width: 55px">联系人</span>
                  <el-input
                    v-model="userName"
                    size="mini"
                    style="width: 200px"
                  ></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="联系单位">
                  <el-input
                    v-model="company"
                    size="mini"
                    style="width: 200px"
                  ></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="联系地址">
                  <el-input
                    v-model="address"
                    size="mini"
                    style="width: 200px"
                  ></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="联系电话">
                  <el-input
                    v-model="phone"
                    size="mini"
                    style="width: 200px"
                  ></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="电子邮箱">
                  <el-input
                    v-model="email"
                    size="mini"
                    style="width: 200px"
                  ></el-input>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-row>
        <el-button @click="sub">提交</el-button>
      </el-col>
    </el-row>
  </my-template>
</template>

<script>
/**
 *{ 应用中心详情 }
 * @param:
 * @author: 宋康
 * @DateTime: 2022/7/1
 */

var param;
import MyTemplate from "@/components/my-template";
import $axios from "@/network";

export default {
  name: "ApplicationCenterDetailed",
  components: {
    MyTemplate,
  },
  data() {
    return {
      dialogVisible: false,
      province: "",
      caseName: "",
      department: "",
      department2: [
        {
          value: "1",
          label: "国家",
        },
        {
          value: "2",
          label: "省",
        },
        {
          value: "3",
          label: "市",
        },
        {
          value: "4",
          label: "区县",
        },
        {
          value: "5",
          label: "乡镇",
        },
        {
          value: "6",
          label: "村",
        },
      ],
      caseType: "1",
      caseType2: [
        {
          value: "1",
          label: "桌面端",
        },
        {
          value: "2",
          label: "web端",
        },
      ],
      ipAddress: "",
      crux: [],
      crux2: [
        {
          id: "1",
          cruxName: " 国家海域",
        },
        {
          id: "2",
          cruxName: "自然资源管理",
        },
        {
          id: "3",
          cruxName: "管理系统",
        },
      ],
      introduce: "",
      casePicture: [],
      userName: "",
      company: "",
      address: "",
      phone: "",
      email: "",
      imageUrl: "",
    };
  },
  mounted() {
    this.updata();
  },

  methods: {
    updata() {
      $axios({
        method: "post",
        url: "/app/crux/findAll",
        data: this.crux,
      }).then((res) => {
        this.crux2 = res.data;
      });
    },
    handleChange(file, fileList) {
      param = new FormData();
      fileList.forEach((item) => {
        param.append("casePicture", item.raw);
      });
    },
    preview(file) {
      this.imageUrl = file.url;
      this.dialogVisible = true;
    },
    sub() {
      param.append("province", this.province);
      param.append("caseName", this.caseName);
      param.append("department", this.department);
      param.append("caseType", this.caseType);
      param.append("ipAddress", this.ipAddress);
      param.append("crux", this.crux);
      param.append("introduce", this.introduce);
      param.append("userName", this.userName);
      param.append("company", this.company);
      param.append("address", this.address);
      param.append("phone", this.phone);
      param.append("email", this.email);

      $axios({
        method: "post",
        url: "/app/case/addCase",
        data: param,
        headers: {
        "Content-Type": "multipart/form-data",
      },
      })
        .then((res) => {
          console.log(res)
          if (res.status) {
            alert("提交成功");
            this.$router.push({
              path: "application",
            });
          } else {
            alert("提交失败");
          }
        })
        .catch((err) => {
          alert(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.case-img {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;

  .case-img-div {
    width: 210px;
    height: 140px;
    margin: 0 5px 10px 5px;

    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
